<template>
  <el-dialog
    v-model="dialogVisible"
    :title="$t('page.system.membershipLevel.detail')"
    width="800px"
    :before-close="handleClose"
  >
    <div v-if="levelData" class="level-detail">
      <el-descriptions :column="2" border>
        <el-descriptions-item :label="$t('page.system.membershipLevel.levelName')">
          <el-tag size="large" type="primary">{{ levelData.levelName }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('page.system.membershipLevel.levelCode')">
          <el-tag type="info">{{ levelData.levelCode }}</el-tag>
        </el-descriptions-item>
        
        <el-descriptions-item :label="$t('page.system.membershipLevel.gridWidth')">
          {{ levelData.gridWidth }} 像素
        </el-descriptions-item>
        <el-descriptions-item :label="$t('page.system.membershipLevel.gridHeight')">
          {{ levelData.gridHeight }} 像素
        </el-descriptions-item>

        <el-descriptions-item :label="$t('page.system.membershipLevel.isFree')">
          <el-tag :type="levelData.isFree === 1 ? 'success' : 'warning'">
            {{ levelData.isFree === 1 ? $t('page.system.membershipLevel.yes') : $t('page.system.membershipLevel.no') }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('page.system.membershipLevel.price')">
          <span v-if="levelData.isFree === 1" class="free-tag">
            {{ $t('page.system.membershipLevel.free') }}
          </span>
          <span v-else class="price-tag">
            ¥{{ levelData.price }}
          </span>
        </el-descriptions-item>

        <el-descriptions-item :label="$t('page.system.membershipLevel.periodType')">
          <el-tag :type="getPeriodTypeTagType(levelData.periodType || 3) as any">
            {{ getPeriodTypeText(levelData.periodType || 3) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('page.system.membershipLevel.periodValue')">
          {{ levelData.periodValue }} {{ getPeriodTypeUnit(levelData.periodType || 3) }}
        </el-descriptions-item>

        <el-descriptions-item :label="$t('page.system.membershipLevel.maxContentCount')">
          <el-tag type="success">{{ levelData.maxContentCount }} 个</el-tag>
        </el-descriptions-item>
        <el-descriptions-item :label="'ID'">
          {{ levelData.id }}
        </el-descriptions-item>

        <el-descriptions-item :label="$t('page.system.membershipLevel.createdTime')" :span="2">
          {{ levelData.createdTime || '-' }}
        </el-descriptions-item>

        <el-descriptions-item :label="$t('page.system.membershipLevel.description')" :span="2">
          <div class="description-content">
            {{ levelData.description || '-' }}
          </div>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 格子预览区域 -->
      <div class="grid-preview-section">
        <h4>格子预览</h4>
        <div class="grid-preview-container">
          <div 
            class="grid-preview"
            :style="{
              width: levelData.gridWidth + 'px',
              height: levelData.gridHeight + 'px'
            }"
          >
            <div class="grid-content">
              <div class="grid-info">
                <div class="level-name">{{ levelData.levelName }}</div>
                <div class="grid-size">{{ levelData.gridWidth }}×{{ levelData.gridHeight }}</div>
              </div>
              <div class="max-content">
                最多 {{ levelData.maxContentCount }} 个内容
              </div>
            </div>
          </div>
          <div class="preview-description">
            <p>预览效果（实际大小）</p>
            <p>此格子将以上述尺寸在用户界面中显示</p>
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">{{ $t('page.system.membershipLevel.cancel') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { ElButton, ElDescriptions, ElDescriptionsItem, ElDialog, ElTag } from 'element-plus';

import type { MembershipLevel } from '#/api/system/membership-level';
import { getPeriodTypeText } from '#/api/system/membership-level';
import { $t } from '#/locales';

interface Props {
  visible: boolean;
  levelData?: Partial<MembershipLevel>;
}

interface Emits {
  (e: 'update:visible', value: boolean): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value),
});

// 获取周期类型标签颜色
const getPeriodTypeTagType = (periodType: number) => {
  const colorMap: { [key: number]: string } = {
    1: 'info',     // 天卡
    2: 'success',  // 周卡
    3: 'primary',  // 月卡
    4: 'warning',  // 季卡
    5: 'danger',   // 年卡
  };
  return colorMap[periodType] || 'info';
};

// 获取周期类型单位
const getPeriodTypeUnit = (periodType: number) => {
  const unitMap: { [key: number]: string } = {
    1: '天',
    2: '周',
    3: '月',
    4: '季',
    5: '年',
  };
  return unitMap[periodType] || '个周期';
};

const handleClose = () => {
  emit('update:visible', false);
};
</script>

<style scoped>
.level-detail {
  padding: 20px 0;
}

.description-content {
  line-height: 1.6;
  color: #333;
}

.free-tag {
  color: #67c23a;
  font-weight: bold;
  font-size: 16px;
}

.price-tag {
  color: #e6a23c;
  font-weight: bold;
  font-size: 16px;
}

.grid-preview-section {
  margin-top: 30px;
}

.grid-preview-section h4 {
  margin-bottom: 15px;
  color: #333;
  font-weight: 500;
}

.grid-preview-container {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.grid-preview {
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
  min-width: 100px;
  min-height: 100px;
}

.grid-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.grid-info {
  text-align: center;
}

.level-name {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.grid-size {
  font-size: 12px;
  color: #666;
}

.max-content {
  font-size: 10px;
  color: #999;
  text-align: center;
  margin-top: auto;
}

.preview-description {
  flex: 1;
  padding-left: 20px;
}

.preview-description p {
  margin: 8px 0;
  color: #666;
  font-size: 14px;
}

.preview-description p:first-child {
  font-weight: bold;
  color: #333;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style> 
 